// AJAX作用：
// * 异步的 JS 和 XML
// * 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据(网页内容发生更改不刷新网页)


const btn = document.getElementsByTagName('button')[0]
const box = document.getElementsByTagName('div')[0]
btn.addEventListener('click', () => {
    // 1.创建对象
    let xhr = new XMLHttpRequest();
    // 2.初始化  设置请求方法和url
    xhr.open('GET','/');
    // 3.发送
    xhr.send();
    // 4.事件绑定，处理服务端返回的结果
    // onreadystatechange拆分解释：
    //    on ---- when 当····时候
    //    readystate ---- 是xhr对象中的属性，表示状态 0 1 2 3 4(1 -- open方法提交完毕、2 -- send方法提交完毕、3 -- 服务端返回部分的结果、4 -- 服务端返回的全部结果)
    //    change ---- 在改变的时候触发
    xhr.onreadystatechange=()=>{
        //如果服务端返回了所以结果
        if (xhr.readyState===4){
            //如果响应状态码为200-300
            //      2XX -- 成功
            if (xhr.status>=200&&xhr.status<300){
                // 处理结果 响应行 响应头 空行 响应体
                // console.log(xhr.status)//响应状态码
                // console.log(xhr.statusText)//状态字符串
                // console.log(xhr.getAllResponseHeaders())//所有响应头
                console.log(xhr.response)//响应体
                box.innerHTML=xhr.getAllResponseHeaders()
            }
        }
    }


})